<template>
	<view>
		<view>
			<view class="" style="display: flex; margin-top: 40rpx; padding: 40rpx 60rpx">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(studentInfo.stuPhoto)"
						:src="studentInfo.stuPhoto ?studentInfo.stuPhoto:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'" mode=""></image>
				</view>
				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{studentInfo.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{studentInfo.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{studentInfo.className}}</view>
					</view>
					<!-- <view style="display: flex; width: 400rpx; margin-top:8rpx;">
						<view class="character">联系电话：</view>
						<view style="display: flex; justify-content: space-between;">
							<view class="character">{{studentInfo.phone}} </view>
							<view @click="callStudent(studentInfo.phone)"
								style="margin-left: 30rpx; line-height: 30rpx;"><uni-icons type="phone-filled" size="20"
									color="#3333d3"></uni-icons>
							</view>
						</view>
					</view> -->
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{studentInfo.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任电话：</view>
						<view class="character">{{studentInfo.teacherPhone}}</view>
						<view style="margin-left: 30rpx; line-height: 30rpx;"
							@click="callTeacher(studentInfo.teacherPhone)"><uni-icons type="phone-filled" size="20"
								color="#3333d3"></uni-icons></view>
					</view>
				</view>
			</view>

			<view v-if="flag == ''" style="padding:40rpx 50rpx; font-size: 36rpx;">补卡照片</view>
			<uni-file-picker v-if="flag == ''" style="width:50%; margin-left: 50rpx;" limit="1" @delete="deletePhoto"
				@select="select" file-mediatype="image" v-model="imageValue"></uni-file-picker>
			<view style="padding:40rpx 50rpx; font-size: 36rpx;" v-if="flag == 2 || flag == 5">处理记录</view>
			<view class="bigBox" v-if="flag == 2 || flag == 5">
				<view class="box" style="display: flex; align-items: center; justify-content: space-around;"
					v-for="item in recordList" :key="item.id" v-if="item.type !=1 && item.type !=2">
					<view class="card" v-if="item.type ==1">
						<view class="">
							<view class="ftColor">{{item.createBy}}电话联系学生</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>

						</view>
					</view>
					<view class="card" v-if="item.type ==2">
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view class="ftColor">{{item.createBy}}电话联系班主任</view>
							<view style="margin-top: 30rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
							<view class="queren" v-if="flag == '' && item.isCall == null" @click="clickNotice(item)">
								确认通知
							</view>
							<view style="color: green; text-align: right;" v-if="item.isCall == 1">
								已通知
							</view>
							<view style="color: red; text-align: right;" v-if="flag == 2 && item.isCall == null ">
								未通知
							</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==3">
						<view class="">
							<view class="ftColor">{{item.createBy}}提交至班主任处理</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==4">
						<view class="">
							<view class="ftColor">{{item.createBy}}班主任处理结果</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==5">
						<view class="">
							<view class="ftColor">{{item.createBy}}提交给部门经理处理</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==6">
						<view class="">
							<view class="ftColor">{{item.createBy}}部门经理处理结果</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==7">
						<view class="">
							<view class="ftColor">{{item.createBy}}宿管反馈结束</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==8">
						<view class="">
							<view class="ftColor">{{item.createBy}}宿管反馈未归寝</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="flag == ''" style="margin-top: 20rpx; padding:0 40rpx;">
				<view>
					<view class="cancel" @click="submitCard">补卡</view>
					<!-- <view class="tijiao" @click="openPopup">提交到班主任</view> -->
				</view>
				<view style="margin-top: 50rpx; font-size: 36rpx;">处理未归寝</view>
				<radio-group @change="checkFlag" style="padding: 10rpx 0;">
					<view class="" style="display: flex;">
						<view class="radio" style="padding:10rpx 0rpx;">
							<radio style="margin-right: 10rpx;" value="2" /><text
								style="font-size: 28rpx;">已通知班主任</text>
						</view>
						<view class="radio" style="padding:10rpx 0rpx; margin-left: 50rpx;">
							<radio style="margin-right: 10rpx;" value="0" /><text
								style="font-size: 28rpx;">未通知班主任</text>
						</view>
					</view>
					<view class="radio" style="padding:10rpx 0rpx;">
						<radio style="margin-right: 10rpx;" value="1" /><text style="font-size: 28rpx;">已联系学生</text>
					</view>
				</radio-group>
				<uni-easyinput style="margin-top: 20rpx;" type="textarea" v-model="processContent"
					placeholder="请填写要跟进内容"></uni-easyinput>

				<view style="margin-top: 20rpx;" class="tijiao" @click="openPopup">提交到班主任</view>
			</view>

			<view style="padding: 40rpx;" v-if="flag == 2 || flag == 5">
				<uni-easyinput v-model="applyDesc" type="textarea" placeholder="请输入内容"></uni-easyinput>
				<view class=""
					style="display: flex; margin-top: 50rpx;align-items: center; justify-content: space-between;">
					<view class="cancel" style="background-color: #3333d3;" @click="confirmReturn">确认归寝</view>
					<view class="tijiao" style="background-color: #3333d3;" @click="confirmNotReturn">确认未归寝</view>
				</view>
			</view>

			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<uni-easyinput type="textarea" v-model="processContent" placeholder="请填写要跟进内容"></uni-easyinput>
					<view style="display: flex; margin-top: 50rpx;justify-content:space-between;">
						<view class="cancel" @click="cancelSubmit">取消</view>
						<view class="tijiao" style="background-color: #3333d3;" @click="confirmSubmit">提交</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import managementTeacher from "@/api/modules/managementTeacher.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				bzrUrl: "/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents",
				topName: "处理",
				userName: "",
				studentInfo: {},
				notReturnedDate: "",
				reason: "",
				buildNo: "",
				date: "",
				processContent: "",
				recordList: [],
				studentId: "",
				flag: "",
				applyDesc: "",
				formData: {},
				count: 0,
				imageValue: [],
				mendCardPhoto: "",
				type: "",
			}
		},
		methods: {
			checkFlag(e) {
				console.log(e)
				// this.formData.flag = e.detail.value
				this.type = e.detail.value
			},
			// 确认通知
			clickNotice(item) {
				uni.showModal({
					title: "是否确认通知到班主任",
					success: () => {
						item.isCall = 1
						teacherClass.updateNotice(item).then(res => {
							this.getRecords(this.date, this.studentId)
						})
					},

				})
			},
			select(e) {
				uni.uploadFile({
					url: uni.url + 'common/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test',
					},
					header: {
						Authorization: "Bearer " + uni.getStorageSync("token"),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						this.mendCardPhoto = JSON.parse(uploadFileRes.data).data
						console.log(this.mendCardPhoto)
					}
				});
			},
			submitCard() {
				if (!this.mendCardPhoto) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				taskNotReturned.updateStudentSdAttence({
					id: this.id,
					mendCardPhoto: this.mendCardPhoto,
					attenceStatus: "1"
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: `/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${this.buildNo}&date=${this.date}&flag=1`
					})
					this.imageValue = []
				})
			},
			deletePhoto(e) {
				this.mendCardPhoto = ""
			},
			cancelSubmit() {
				this.$refs.popup.close()
			},
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			cancelReturn() {
				uni.navigateTo({
					url: this.bzrUrl
				})
			},
			// 数字变中文
			formatTen(num) {
				return num > 9 ? (num + "") : ("0" + num);
			},
			formatDate(date) {
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + "-" + this.formatTen(month) + "-" + this.formatTen(day) + " " + this.formatTen(hour) + ":" +
					this.formatTen(
						minute) + ":" + this.formatTen(second);
			},
			getRecords(date, id) {
				managementTeacher.getTrackRecordByDateAndStuId(date, id).then(res => {
					console.log(res)
					this.recordList = res.data
					this.recordList.forEach(item => {
						item.createTime = parseTime(new Date(item.createTime).getTime())
						console.log(item.createTime)
					})
					console.log(this.recordList)
				})
			},
			callTeacher(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					// success: () => {
					// 	managementTeacher.createRecords({
					// 		studentId: this.studentInfo.id,
					// 		bdormitoryId: this.studentInfo.bdormitoryId,
					// 		buildingNo: this.studentInfo.buildingNo,
					// 		storey: this.studentInfo.storey,
					// 		dormitoryNo: this.studentInfo.dormitoryNo,
					// 		contactDate: this.date,
					// 		type: 2,
					// 		result: phone,
					// 		createUserId: uni.getStorageSync("loginId")
					// 	}).then(res => {
					// 		console.log(res)
					// 		this.getRecords(this.date, this.studentId)
					// 	})
					// }
				});
			},
			callStudent(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					// success: () => {
					// 	managementTeacher.createRecords({
					// 		studentId: this.studentInfo.id,
					// 		bdormitoryId: this.studentInfo.bdormitoryId,
					// 		buildingNo: this.studentInfo.buildingNo,
					// 		storey: this.studentInfo.storey,
					// 		dormitoryNo: this.studentInfo.dormitoryNo,
					// 		contactDate: this.date,
					// 		type: 1,
					// 		result: phone,
					// 		createUserId: uni.getStorageSync("loginId")
					// 	}).then(res => {
					// 		console.log(res)
					// 		console.log(res)
					// 		this.getRecords(this.date, this.studentId)
					// 	})
					// }
				});

			},
			// 拿到上传参数
			getFromData(options) {
				teacherClass.workFlowInfo({
					processInstanceId: options.processInstanceId,
					createBy: this.userName
				}).then(res => {
					this.formData = res.data
				})
			},
			confirmSubmit() {
				if (this.recordList.length == 0) {
					uni.showToast({
						title: "请立即拨打电话通知班主任",
						icon: "none",
					})
					return
				} else if (this.recordList.length > 0) {
					this.recordList.forEach(item => {
						if (item.type == 2) {
							this.count++
						}
					})
				}
				if (!this.processContent) {
					uni.showToast({
						title: "请填写跟进内容",
						icon: "none",
					})
					return
				}
				if (this.count == 0) {
					uni.showToast({
						title: "请立即拨打电话通知班主任",
						icon: "none",
					})
					return
				}
				managementTeacher.createApply({
					applyId: "notRetrunApplyNew",
					applyStatus: "1",
					classId: this.studentInfo.classId,
					createBy: this.userName,
					notRetrunedDate: this.notReturnedDate,
					reason: this.processContent,
					sdId: this.studentInfo.bdormitoryId,
					studentId: this.studentId,
				}).then(res => {
					this.$refs.popup.close()
					this.processContent = ""
					this.getRecords(this.date, this.studentId)
					uni.showToast({
						title: "提交成功"
					})
					uni.navigateTo({
						url: `/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${this.buildNo}&date=${this.date}&flag=1`
					})
				})
			},
			toUncheck() {
				uni.navigateTo({
					url: "/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents"
				})
			},
			// 确认归寝
			confirmReturn() {
				if (!this.applyDesc) {
					uni.showToast({
						title: "请填写备注",
						icon: "none"
					})
					return
				}
				this.formData.flag = 1
				this.formData.applyDesc = this.applyDesc
				this.formData.createBy = this.userName
				console.log(this.formData)
				teacherClass.processWorkFlow(this.formData).then(res => {
					console.log(res)
					// if (res.code == 200) {
					uni.showToast({
						title: "操作成功",
					})
					uni.navigateTo({
						url: "/pages_main/managementTeacher/taskNotReturned/taskNotReturned"
					})
					// }

				})
			},
			// 确认未归寝
			confirmNotReturn() {
				if (!this.applyDesc) {
					uni.showToast({
						title: "请填写备注",
						icon: "none"
					})
					return
				}
				this.formData.flag = 0
				this.formData.applyDesc = this.applyDesc
				this.formData.createBy = this.userName
				console.log(this.formData)
				teacherClass.processWorkFlow(this.formData).then(res => {
					console.log(res)
					// if (res.code == 200) {
					uni.showToast({
						title: "操作成功",
					})
					uni.navigateTo({
						url: "/pages_main/managementTeacher/taskNotReturned/taskNotReturned"
					})
					// }

				})
			},
			submit() {
				managementTeacher.createApply({
					applyId: "notRetrunApplyNew",
					applyStatus: "1",
					classId: this.studentInfo.classId,
					createBy: this.userName,
					notRetrunedDate: this.notReturnedDate,
					reason: this.reason,
					sdId: this.studentInfo.bdormitoryId,
					studentId: this.studentId,
				}).then(res => {
					uni.navigateTo({
						url: "/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents"
					})
				})
			},
			openPopup() {
				if (!this.processContent) {
					uni.showToast({
						title: "请填写跟进内容",
						icon: "none",
					})
					return
				}
				managementTeacher.createApply({
					applyId: "notRetrunApplyNew",
					applyStatus: "1",
					classId: this.studentInfo.classId,
					createBy: this.userName,
					notRetrunedDate: this.notReturnedDate,
					reason: this.processContent,
					sdId: this.studentInfo.bdormitoryId,
					studentId: this.studentId,
					type: this.type,
				}).then(res => {
					this.$refs.popup.close()
					this.processContent = ""
					this.getRecords(this.date, this.studentId)
					uni.showToast({
						title: "提交成功"
					})
					uni.navigateTo({
						url: `/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${this.buildNo}&date=${this.date}&flag=1`
					})
				})
				// if (this.recordList.length == 0) {
				// 	uni.showToast({
				// 		title: "请拨打电话通知班主任再做提交",
				// 		icon: "none",
				// 		duration: 3000
				// 	})
				// 	return
				// } else if (this.recordList.length > 0) {
				// 	this.recordList.forEach(item => {
				// 		if (item.type == 2) {
				// 			this.count++
				// 		}
				// 	})
				// }
				// if (this.count == 0) {
				// 	uni.showToast({
				// 		title: "请拨打电话通知班主任再做提交",
				// 		icon: "none",
				// 		duration: 3000
				// 	})
				// 	return
				// }
				// this.$refs.popup.open()
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.flag == 2) {
				this.flag = options.flag
				let obj = JSON.parse(options.item)
				this.bzrUrl = `/pages_main/managementTeacher/taskNotReturned/taskNotReturned`
				this.userName = uni.getStorageSync("userName")
				taskNotReturned.getStudentById(obj.studentId).then(res => {
					this.studentInfo = res.data
				})
				this.date = obj.notRetrunedDate
				this.notReturnedDate = obj.notRetrunedDate
				this.studentId = obj.studentId
				this.getRecords(obj.notRetrunedDate, obj.studentId)
				this.getFromData(obj)
			} else if (options.flag == 5) {
				this.flag = options.flag
				let obj = JSON.parse(options.item)
				this.bzrUrl =
					`/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?current=${options.current}&flag=1`
				this.userName = uni.getStorageSync("userName")
				taskNotReturned.getStudentById(obj.studentId).then(res => {
					this.studentInfo = res.data
				})
				this.date = obj.notRetrunedDate
				this.notReturnedDate = obj.notRetrunedDate
				this.studentId = obj.studentId
				this.getRecords(obj.notRetrunedDate, obj.studentId)
				this.getFromData(obj)
			} else {
				this.buildNo = options.buildNo
				this.date = options.date
				this.bzrUrl =
					`/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${this.buildNo}&date=${this.date}&flag=1`
				this.userName = uni.getStorageSync("userName")
				taskNotReturned.getStudentById(options.studentId).then(res => {
					this.studentInfo = res.data
				})
				this.notReturnedDate = options.date
				this.studentId = options.studentId
				this.getRecords(options.date, options.studentId)
			}

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;

	}

	.character {
		/* width: 150rpx; */
		font-size: 24rpx;
		/* color: #979999; */
		color: #444;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 20vh;
		background-color: #fff;
		width: 500rpx;
	}

	.box {
		/* margin-top: 20rpx; */
		border-top: 1rpx solid #ddd;
	}

	.box:nth-child(1) {
		margin-top: -20rpx;
		border-top: none;
	}


	.card {
		width: 86%;
		/* border: 1rpx #000 solid; */
		padding: 20rpx 10rpx 20rpx 10rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.ftColor {
		color: #3333d3;
	}

	.cancel {
		/* width: 35%; */
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.tijiao {
		/* width: 35%; */
		background-color: #ff009a;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	/deep/.file-picker__box[data-v-4c5c5653] {
		width: 20%;
		height: 70rpx;
	}

	.queren {
		width: 230rpx;
		height: 50rpx;
		background-color: #3333d3;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}

	.queren2 {
		width: 230rpx;
		height: 50rpx;
		background-color: #ff009a;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}
</style>
